<template>
  <div class="control-panel">
    <span @click="moveUp(question)"><icon name="arrow-up" scale="1"></icon></span>
    <span @click="moveDown(question)"><icon name="arrow-down" scale="1"></icon></span>
    <span @click="editQuestion(question)"><icon name="pencil-alt" scale="1"></icon></span>
    <span @click="removeQuestion(question)"><icon name="trash" scale="1"></icon></span>
  </div>
</template>

<script>
  export default {
    name: "view-section-control",
    props: ['question'],
    methods: {
      editQuestion(question) {
        this.$emit('edit', this.question);
      },
      removeQuestion(question) {
        this.$confirm('确认删除问答?')
          .then(() => {
            this.$emit('remove',question);
          })
          .catch(() => {
          })
      },
      moveDown(question) {
        this.$emit('move', { direction: 'down', question })
      },
      moveUp(question) {
        this.$emit('move', { direction: 'up', question })
      },
    },
  }
</script>

<style lang="scss">
  .control-panel{
    padding-left: 15px;
    span{
      display: inline-flex;
      margin: 8px 3px;
      cursor: pointer;
      opacity: 0.6;
      &:hover{
        opacity: 1;
      }
    }
    .fa-icon{}
  }
</style>
